<template>
	<!--特色频道-->
	<div class="featurePD-box">
		<Banner></Banner>
		<div class="featurePD-box-header">
			<div class="featurePD-box-rule"></div>
			<span>特色频道</span>
		</div>
		<ul class="featurePD-box-content-ul">
			<li @click="clickLinkRoute(v.mrhpflag,v.id,v.intro,v.name)" v-for="v in featureDataArray">
				<img :src="v.bgimg"/>
				<p class="featurePD-p-top">{{v.name}}</p>
				<p class="featurePD-p-bottom">{{v.shortIntro}}</p>
			</li>
			<!--<li>
				<img src="https://shiba-zhonghang.oss-cn-hangzhou.aliyuncs.com/zhonghang/20190313/628a6626101945fca244c1324a4be570.jpg"/>
				<p class="featurePD-p-top">加国有家</p>
				<p class="featurePD-p-bottom">学无止境，中身相伴，加国有家</p>
			</li>
			<li>
				<img src="https://shiba-zhonghang.oss-cn-hangzhou.aliyuncs.com/zhonghang/20190313/628a6626101945fca244c1324a4be570.jpg"/>
				<p class="featurePD-p-top">加国有家</p>
				<p class="featurePD-p-bottom">学无止境，中身相伴，加国有家</p>
			</li>-->
		</ul>
	</div>
</template>

<script>
	import fun from "../util/function"
	import Banner from '../components/zhonghang/ZGYH_Banner'
	export default{
		data(){
			return{
				featureDataArray:[]
			}
		},
		created(){
			this.$store.dispatch("showNav");
			this.getFeatureDataList();
			this.dotNum()//统计
		},
		activated(){
           this.$store.dispatch('showNav');
		},
		destroyed() {
		   this.$store.dispatch('hideNav');
		},
		components:{
			Banner,
		},
		methods:{
			dotNum(){//打点统计
				//console.log(11)
				let _this = this;
				var argumentData = {
					sessionId: "feature_page", //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource:fun.getPlatform(),//微信 app
					url:window.location.href,//当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			clickLinkRoute(type,id,intro,name){
				if(type=="1"){//每日汇评
					this.$router.push(`/${this.$channel}/dayComments`)
				}else if(type=="0"){
					this.$router.push({path:`/${this.$channel}/featurePD_child`,query:{id:id,intro:intro,name:name}})
				}else{
					console.log("出错")
				}
				let _this = this;
				var argumentData = {
					sessionId: "featureId_"+id, //场次id
					streamType: 12, //视频类型：1-预告 2-直播 3-回看 10-全局统计 11-商品点击 12-页面
					actionValue: 1, //行为：1-进入 2-离开 3-点击播放 4-留言 5-点赞 6-关注 7-分享 8-开播 9-关播 10-最高峰值
					playSource:fun.getPlatform(),//微信 app
					url:window.location.href,//当前的url
				};
				_this.$http.post("/h5live/recordData", argumentData, {
						headers: {
							"Content-Type": "application/json"
						}
					})
					.then(
						res => {
							//console.log(res)
						},
						err => {
							console.log(err);
						}
					);
			},
			getFeatureDataList(){
				let _this = this;
				//请求特色频道列表      
				_this.$http.get("/h5live/getTspdList").then(
					res => {
						if(res.data.code=='000000'){
							if(res.data.data.length){
								_this.featureDataArray = res.data.data.filter((v)=>{
								return v.isShow
							})
							}else{
								console.log("特色频道数组为空")
							}

						}else{
							console.log("接口报错")
						}
						
						}
					);
			  }
			}
		}

</script>

<style scoped="scoped">
	.featurePD-box {
		width: 100vw;
		height: calc(100vh - 96px);
		/*background: pink;*/
		float: left;
		overflow: scroll;
	}
	
	.featurePD-box-header {
		width: 100%;
		height: 40px;
		/*background: sandybrown;*/
		font-size: 36px;
		line-height: 40px;
		font-weight: 500;
		color: rgba(24, 24, 24, 1);
		margin-top: 30px;
		display: flex;
		align-items: center;
		
	}
	
	.featurePD-box-rule {
		width: 5px;
		height: 31px;
		background: linear-gradient(0deg, rgba(204, 74, 77, 1), rgba(247, 127, 108, 1));
		border-radius: 3px;
		margin-left: 50px;
	}
	.featurePD-box-header span{
		margin-left: 18px;
	}
	.featurePD-box-content-ul{
		background:#F4F4F4 ;
	}
	.featurePD-box-content-ul li{
		width: 100%;
		height: 526px;
		background: white;
	}
	.featurePD-box-content-ul li:not(:first-child){
		margin-top: 10px;
	}
	.featurePD-box-content-ul li img{
		width:710px;
		height:401px;
		border-radius:5px;
		float: left;margin: 20px 20px 0  20px;
	}
	.featurePD-box-content-ul li p{
		float: left;
		width:100%;
		/*background: pink;*/
		padding: 0 20px 0 50px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.featurePD-p-top{
		font-size:28px;
		font-weight:400;
		color:rgba(12,12,12,1);
		margin-top: 15px;
	}
	.featurePD-p-bottom{
		font-size:24px;
		font-weight:500;
		color:rgba(153,153,153,1);
		margin-top: 15px;
	}
</style>